<template>
	<!-- <view class="emoji" v-show="value"> -->
	<view class="emoji" :style="{ height: value ? '690rpx' : '0px' }">
		<view class="text_28 color_4a flex_r fa_c emoji-title">
			<view class="icon_ emoji-title-item" :class="{ emoji_title_item: thisIndex === index }" v-for="(item, index) in topList" :key="index" @click="onTop(index)">
				<view class="emoji-title-item-img">
					<image class="img" :src="item.icon" mode="aspectFill"></image>
				</view>
			</view>
			<view class="flex1"></view>
			<view class="text_28 color__" @click="onEdit" v-if="thisIndex === 1">{{ isEdit ? '关闭' : '管理' }}</view>
		</view>
		<!-- disable-touch -->
		<swiper class="swiper" @change="change" :current="thisIndex">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y="true" class="swiper-item-box" lower-threshold="10" @scroll="scroll" @scrolltolower="scrolltolower">
					<view class="swiper-item-box flex_r">
						<view class="flex_r swiper-item-box-l" v-for="(im, ix) in list" :key="ix">
							<view
								class="icon_ emoji-item"
								v-for="(item, index) in im"
								:key="index"
								:style="{ opacity: ix === opacityGroup && (index == 5 || index == 6 || index == 7) ? opacity : 1 }"
							>
								<image class="img" :src="emojiUrl + item.image" @click="chooseEmoji(item.text)"></image>
							</view>
						</view>
						<view class="img" style="height: 18vw"></view>
					</view>
				</scroll-view>
				<view class="icon_ size_white swiper-item-box-b">
					<view class="icon_ swiper-item-box-delete" @click="deleteFn">
						<image
							class="img"
							src=""
							mode="aspectFill"
						></image>
					</view>
					<view class="icon_ text_30 swiper-item-box-button" @click="sendingText">发送</view>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<emoji-img @onEmoji="onEmoji" :isShow="value" v-model="isEdit"></emoji-img>
			</swiper-item>
		</swiper>
	</view>
</template>

<!-- 5,6,7,
12,13,14
19,20,21
26,27,28
33,34,35 -->

<script>
import emojiImg from './emoji-img.vue';
import { emojiMap } from '@/utils/lib/EmojiDecoder.js';
const emojiUrl = 'https://imgcache.qq.com/open/qcloud/tim/assets/emoji/';
let height = null;
let height2 = null;

let list = [];
export default {
	components: {
		emojiImg
	},
	props: {
		value: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			isEdit: false,
			emojiUrl,
			list: [],
			scrollTop: 0,
			opacity: 1,
			opacityGroup: null,
			thisIndex: 0,
			topList: [
				{
					icon: '',
					type: 0
				},
				// {
				// 	icon: '',
				// 	type: 0
				// }
			]
		};
	},
	mounted() {
		this.$nextTick(() => {
			// let view = uni.createSelectorQuery().select('.swiper-item-box-delete');
			// view.boundingClientRect((data) => {
			// 	height = data.height * 5;
			// 	height2 = data.height;
			// 	this.init();
			// }).exec();

			const query = uni.createSelectorQuery().in(this);
			query
				.select('.swiper-item-box-delete')
				.boundingClientRect((data) => {
					height = data?.height * 5;
					height2 = data?.height;
					this.init();
				})
				.exec();
		});
	},
	methods: {
		onEdit() {
			this.isEdit = !this.isEdit;
		},
		change(e) {
			this.thisIndex = e.detail.current;
		},
		onTop(index) {
			this.thisIndex = index;
		},

		scroll(e) {
			this.scrollTop = e.detail.scrollTop + height;
			for (let i = 0; i < this.list.length; i++) {
				let top = list[i];
				if (this.scrollTop < top && top < this.scrollTop + height2) {
					this.opacityGroup = i - 1;
					let opacityValue = this.scrollTop + height2 - 20 - top;
					this.opacity = opacityValue / height2;
					return;
				}
			}
		},
		// 触底
		scrolltolower() {
			console.log('触底');
			this.opacityGroup = null;
		},
		init() {
			let newList = [];
			let i = 1;
			for (let key in emojiMap) {
				let obj = {};
				obj['index'] = i;
				obj['text'] = key;
				obj['image'] = emojiMap[key];
				i++;
				newList.push(obj);
			}
			list = [];
			let A = newList.filter((item, index) => {
				return (index + 1) % 8 === 0;
			});
			A.unshift({ index: 0 });
			A.push({ index: newList.length });
			this.list = A.map((item, index) => {
				return newList.slice(A[index].index, A[index + 1]?.index || newList.length);
			});
			list = this.list.map((item, index) => {
				return (index * height2).toFixed();
			});
			// this.scroll({ detail: { scrollTop: 10 } });
		},
		//选择表情
		chooseEmoji(key) {
			this.$emit('onEmoji', key);
		},
		// 删除
		deleteFn() {
			this.$emit('deleteFn');
		},
		// 发送
		sendingText() {
			this.$emit('sendingText');
		},
		// =============
		// 选择自定义表情
		onEmoji(item) {
			this.$emit('sendingEmojiPack', item);
		}
	}
};
</script>

<style lang="scss" scoped>
.emoji {
	box-sizing: border-box;
	width: 100%;
	overflow: hidden;
	transition: all 0.2s;
	background-color: #f6f6f6;
	.emoji-title {
		box-sizing: border-box;
		padding: 0 20rpx;
		width: 100%;
		height: 100rpx;
		.emoji-title-item {
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 10rpx;
			border-radius: 8rpx;
			margin-right: 16rpx;
			transition: all 0.3s;
			.emoji-title-item-img {
				width: 70%;
				height: 70%;
			}
		}
		.emoji_title_item {
			background-color: #fff;
		}
	}
}
.swiper {
	width: 100%;
	height: 590rpx;
	background-color: #ececec;
	.scroll-Y {
		width: 100%;
		height: 100%;
	}
	.swiper-item {
		position: relative;
		width: 100%;
		height: 100%;

		.swiper-item-box {
			position: relative;
			z-index: 1;
			box-sizing: border-box;
			width: 100%;
			height: 100%;
			flex-wrap: wrap;
			align-items: flex-start;

			.swiper-item-box-l {
				// width: calc(62.5vw);
				width: calc(100vw);
				flex-wrap: wrap;
				align-items: flex-start;
			}
			.swiper-item-box-r {
				width: calc(37.5vw);
				flex-wrap: wrap;
				align-items: flex-start;
			}

			.emoji-item {
				width: calc(12.5vw);
				height: calc(12.5vw);
				flex-shrink: 0;
				transition: all 0.1s;
				.img {
					width: 70%;
					height: 70%;
				}
			}
		}

		.swiper-item-box-b {
			width: calc(38vw);
			position: absolute;
			z-index: 99;
			right: 0rpx;
			bottom: 0px;
			padding: 0 0 40rpx 0;
			// background-color: #000;
			background-image: linear-gradient(to top, #ececec, #ececec, #ececec, #ececec, #ececec, rgba(0, 0, 0, 0));
		}
		.swiper-item-box-delete {
			width: 116rpx;
			height: calc(12.5vw);
			border-radius: 10rpx;
			margin-right: 20rpx;
			background-color: #fff;
			.img {
				width: 45%;
				height: 45%;
				margin-right: 4rpx;
			}
		}
		.swiper-item-box-button {
			width: 116rpx;
			height: calc(12.5vw);
			border-radius: 10rpx;
			margin-right: 10rpx;
			background-color: #05c160;
		}
	}
}
</style>
